import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:vector_math/vector_math_64.dart' as vector;

class ResetTwoMatrix4 extends StatefulWidget {
  @override
  _ResetTwoMatrix4State createState() => _ResetTwoMatrix4State();
}

class _ResetTwoMatrix4State extends State<ResetTwoMatrix4> {
  // 平移
  double dx = 0;
  double dy = 0;

  // 缩放
  double scaleX = 1;
  double scaleY = 1;

  // 旋转
  double rotationAngle = 0.0;

  //倾斜 skex
  double skex = 0;

  // 绘制的企鹅 svg
  PictureInfo? imgSvgPicture;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    SystemChrome.setPreferredOrientations(// 使设备横屏显示
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          CustomPaint(
            size: Size.infinite,
            painter: MyCustomPainter(
                dx: dx,
                dy: dy,
                rotationAngle: rotationAngle,
                scaleX: scaleX,
                scaleY: scaleY),
          ),
          Positioned(
            top: 30,
            left: 30,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: IconButton(
                onPressed: () {
                  Get.back();
                },
                icon: Icon(
                  Icons.arrow_back,
                  color: Colors.yellowAccent,
                  size: 30,
                ),
              ),
            ),
          ),
          Positioned(
            right: 220,
            top: 30,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: IconButton(
                onPressed: () {
                  setState(() {
                    scaleX = 1;
                    scaleY = 1;
                    rotationAngle = 0;
                    dx = 0;
                    dy = 0;
                  });
                },
                icon: Text("重置"),
              ),
            ),
          ),
          Positioned(
            right: 100,
            top: 30,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: IconButton(
                onPressed: () {
                  setState(() {
                    scaleX = scaleX + 0.1;
                    scaleY = scaleY + 0.1;
                  });
                },
                icon: Text("缩放"),
              ),
            ),
          ),
          Positioned(
            right: 160,
            top: 30,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: IconButton(
                onPressed: () {
                  setState(() {
                    rotationAngle = rotationAngle + 0.1;
                  });
                },
                icon: Text("旋转"),
              ),
            ),
          ),
          Positioned(
            right: 30,
            top: 30,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.black26,
                  borderRadius: BorderRadius.circular(40)),
              child: IconButton(
                onPressed: () {
                  setState(() {
                    dx = dx + 20;
                    dy = dy + 20;
                  });
                },
                icon: Text("偏移量"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MyCustomPainter extends CustomPainter {
  MyCustomPainter({
    required this.dx,
    required this.dy,
    required this.scaleX,
    required this.scaleY,
    required this.rotationAngle,
  });

  // 平移
  final double dx;
  final double dy;

  // 缩放
  final double scaleX;
  final double scaleY;

  // 旋转
  final double rotationAngle;

  // 图片尺寸
  Size imgSize = Size(100, 100);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    // TODO: implement paint
    Rect imgRect = Rect.fromLTRB(0, 0, imgSize.width, imgSize.height);
    Matrix4 translateMatrix4 = Matrix4.identity()..translate(0.0, 0.0);
    Matrix4 rotateMatrix4 = Matrix4.identity()
      // ..translate(imgSize.width * scaleX / 2, imgSize.height * scaleY / 2)
      ..rotateZ(rotationAngle);
    // ..translate(-imgSize.width * scaleX / 2, -imgSize.height * scaleY / 2);
    Matrix4 scaleMatrix4 = Matrix4.identity()..scale(scaleX, scaleY);
    // 倾斜 放最后 skex;

    // 计算四个顶点的当前位置
    List<Offset> _vertext = getVertex(imgSize, rotateMatrix4 * scaleMatrix4);
    print(_vertext);

    Path transformedPath = Path()
      ..moveTo(_vertext[0].dx, _vertext[0].dy); // 移动到第一个顶点
    for (int i = 1; i < _vertext.length; i++) {
      transformedPath.lineTo(_vertext[i].dx, _vertext[i].dy); // 添加线段
    }
    transformedPath.close(); // 封闭路径
    // 把偏移量加回去, 这样就可以对其顶点了
    transformedPath = transformedPath.shift(Offset(100, 100));
    // 绘制矩形
    paint
      ..color = Colors.greenAccent
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0;
    // canvas.translate(50, 200);
    canvas.drawPath(transformedPath, paint);
    Matrix4 matrix4 =
        translateMatrix4 * rotateMatrix4 * scaleMatrix4; // 如果有倾斜，最后要乘倾斜

    canvas.save();
    canvas.transform(matrix4.storage);
    canvas.drawRect(
        imgRect,
        paint
          ..color = Colors.red
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2);

    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}

List<Offset> getVertex(Size imgSize, Matrix4 matrix) {
  vector.Vector4 topLef = vector.Vector4(0, 0, 0, 0); // 使用Vector3表示一个点;
  vector.Vector4 topRight =
      vector.Vector4(imgSize.width, 0, 0, 0); // 使用Vector3表示一个点;

  vector.Vector4 bottomRight =
      vector.Vector4(imgSize.width, imgSize.height, 0, 0); // 使用Vector3表示一个点;
  vector.Vector4 bottomLeft =
      vector.Vector4(0, imgSize.height, 0, 0); // 使用Vector3表示一个点;

  vector.Vector4 topLeftPosition = matrix.transformed(topLef);
  vector.Vector4 topRightPosition = matrix.transformed(topRight);
  vector.Vector4 bottomRightPosition = matrix.transformed(bottomRight);
  vector.Vector4 bottomLeftPosition = matrix.transformed(bottomLeft);
  return [
    Offset(topLeftPosition.x, topLeftPosition.y),
    Offset(topRightPosition.x, topRightPosition.y),
    Offset(bottomRightPosition.x, bottomRightPosition.y),
    Offset(bottomLeftPosition.x, bottomLeftPosition.y),
  ];
}
